<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>七夕浪漫 - 纯纯的爱</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        love: '#FF5252',
                        loveLight: '#FF8A80',
                        loveDark: '#C62828',
                        romantic: '#FF4081',
                        dream: '#8E24AA',
                        soft: '#FCE4EC'
                    },
                    fontFamily: {
                        romantic: ['Dancing Script', 'cursive'],
                        sans: ['Inter', 'system-ui', 'sans-serif']
                    }
                }
            }
        }
    </script>
    
    <!-- 引入Google Fonts - Dancing Script -->
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap" rel="stylesheet">
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            }
            .heart-beat {
                animation: heartBeat 1.5s infinite;
            }
            .float {
                animation: float 3s ease-in-out infinite;
            }
            .float-delay-1 {
                animation-delay: 0.5s;
            }
            .float-delay-2 {
                animation-delay: 1s;
            }
        }
    </style>
    
    <style>
        /* 全局动画定义 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .animate-fade-in {
            animation: fadeIn 1s ease-out forwards;
        }
        
        @keyframes heartBeat {
            0% { transform: scale(1); }
            14% { transform: scale(1.3); }
            28% { transform: scale(1); }
            42% { transform: scale(1.3); }
            70% { transform: scale(1); }
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
        
        body {
            background-image: url('assets/background.jpg');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body class="min-h-screen bg-soft text-gray-800 overflow-x-hidden">
    <!-- 背景音乐 - 使用preload="none"延迟加载 -->
    <audio id="background-music" loop volume="0.3" preload="none">        
        <source src="assets/love-song.mp3" type="audio/mpeg">
    </audio>
    
    <!-- 启动弹框 - 确保在最顶层且样式简单 -->
    <div id="start-modal" class="fixed top-0 left-0 right-0 bottom-0 bg-black opacity-90 z-[9999] flex items-center justify-center">
        <div class="bg-white rounded-2xl p-8 max-w-md w-full text-center shadow-xl">
            <div class="mb-6 text-love text-5xl">💕</div>
            <h2 class="text-2xl font-bold text-gray-800 mb-4">准备好了吗？</h2>
            <p class="text-gray-600 mb-6">点击下方按钮开始我们的浪漫之旅...</p>
            <button id="start-button" class="bg-love hover:bg-love-deep text-white font-bold py-3 px-8 rounded-full">
                开始体验
            </button>
        </div>
    </div>
    
    <!-- 音乐控制面板 -->
    <div id="music-player" class="fixed bottom-6 right-6 z-50 transition-all duration-300 opacity-100">
        <!-- 音量控制滑块 -->
        <div id="volume-control" class="hidden md:block absolute -left-56 bottom-0 bg-white/90 backdrop-blur-md rounded-full px-4 py-3 shadow-lg transform transition-all duration-300 opacity-0 translate-y-4">
            <label for="volume-slider" class="flex items-center gap-2 text-gray-700">
                <i class="fa fa-volume-up text-love"></i>
                <input type="range" id="volume-slider" min="0" max="1" step="0.05" value="0.3" 
                       class="w-32 accent-love cursor-pointer">
            </label>
        </div>
        
        <!-- 音乐控制按钮 -->
        <button id="music-control" class="bg-love text-white w-14 h-14 rounded-full shadow-lg flex items-center justify-center hover:bg-loveDark transition-all duration-300 transform hover:scale-105">
            <i id="music-icon" class="fa fa-music text-xl"></i>
        </button>
    </div>
    
    <!-- 顶部导航 -->
    <header class="bg-white/80 backdrop-blur-md shadow-sm fixed top-0 left-0 right-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-heart text-love heart-beat text-xl"></i>
                <h1 class="text-xl font-bold bg-gradient-to-r from-love to-romantic bg-clip-text text-transparent">
                    七夕浪漫夜
                </h1>
            </div>
            <nav>
                <ul class="flex space-x-6">
                    <li><a href="#home" class="hover:text-love transition-colors duration-300">首页</a></li>
                    <li><a href="#gallery" class="hover:text-love transition-colors duration-300">我们的回忆</a></li>
                    <li><a href="#love-message" class="hover:text-love transition-colors duration-300">爱的告白</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="pt-20">
        <!-- 首页部分 -->
        <section id="home" class="min-h-[90vh] flex flex-col items-center justify-center relative px-4 py-16">
            <!-- 装饰性心形 -->
            <div class="absolute top-20 left-10 w-16 h-16 text-love/20 text-5xl float">
                <i class="fa fa-heart"></i>
            </div>
            <div class="absolute bottom-20 right-10 w-12 h-12 text-love/20 text-4xl float float-delay-1">
                <i class="fa fa-heart"></i>
            </div>
            <div class="absolute top-1/4 right-1/4 w-10 h-10 text-love/20 text-3xl float float-delay-2">
                <i class="fa fa-heart"></i>
            </div>
            
            <!-- 主要内容 -->
            <div class="max-w-4xl mx-auto text-center animate-fade-in">
                <h2 class="text-5xl md:text-7xl font-romantic text-romantic font-bold mb-6 text-shadow">
                    纯纯猪，爱你哟
                </h2>
                
                <div class="relative mx-auto max-w-md mb-10">
                    <img id="main-image" src="assets/chunchun-main.jpg" alt="纯纯" class="rounded-full w-64 h-64 object-cover border-8 border-white shadow-xl mx-auto">
                    <div class="absolute -bottom-4 -right-4 bg-love text-white p-3 rounded-full shadow-lg">
                        <i class="fa fa-heart heart-beat"></i>
                    </div>
                </div>
                
                <div class="bg-white/80 backdrop-blur-md rounded-2xl p-8 shadow-lg">
                    <p class="text-lg md:text-xl font-romantic text-gray-700 mb-6">
                        亲爱的纯纯，<br>
                        七夕佳节，想告诉你，<br>
                        你是我生命中最美的风景，<br>
                        愿我们的爱情像牛郎织女一样，<br>
                        跨越一切障碍，永远在一起。
                    </p>
                    <a href="#gallery" class="inline-block bg-love hover:bg-loveDark text-white font-medium py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105">
                        查看我们的回忆
                    </a>
                </div>
            </div>
        </section>
        
        <!-- 图片画廊部分 -->
        <section id="gallery" class="py-20 px-4 bg-white/90">
            <div class="max-w-6xl mx-auto">
                <h2 class="text-4xl font-romantic text-center text-love mb-16">我们的美好回忆</h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <!-- 图片项 -->
                    <div class="relative group overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-all duration-300">
                        <!-- 懒加载图片 -->
                        <img data-src="assets/photo1.jpg" alt="我们的回忆" 
                             src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' fill='%23f0f0f0'%3E%3Crect width='400' height='300' fill='%23f5f5f5'/%3E%3Cpath d='M320 160c0 35.3-28.7 64-64 64s-64-28.7-64-64 28.7-64 64-64 64 28.7 64 64zM32 160c0 35.3-28.7 64-64 64S-96 195.3-96 160 12.7 96 48 96s64 28.7 64 64zm128-80c0 17.7-14.3 32-32 32s-32-14.3-32-32 14.3-32 32-32 32 14.3 32 32zM288 80c0 17.7-14.3 32-32 32s-32-14.3-32-32 14.3-32 32-32 32 14.3 32 32z' fill='%23d0d0d0'/%3E%3C/svg%3E" 
                             class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110 lazy-load">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
                            <p class="text-white font-medium">与纯纯的美好时光</p>
                        </div>
                    </div>
                    
                    <div class="relative group overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-all duration-300">
                        <!-- 懒加载图片 -->
                        <img data-src="assets/photo2.jpg" alt="我们的回忆" 
                             src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' fill='%23f0f0f0'%3E%3Crect width='400' height='300' fill='%23f5f5f5'/%3E%3Cpath d='M320 160c0 35.3-28.7 64-64 64s-64-28.7-64-64 28.7-64 64-64 64 28.7 64 64zM32 160c0 35.3-28.7 64-64 64S-96 195.3-96 160 12.7 96 48 96s64 28.7 64 64zm128-80c0 17.7-14.3 32-32 32s-32-14.3-32-32 14.3-32 32-32 32 14.3 32 32zM288 80c0 17.7-14.3 32-32 32s-32-14.3-32-32 14.3-32 32-32 32 14.3 32 32z' fill='%23d0d0d0'/%3E%3C/svg%3E" 
                             class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110 lazy-load">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
                            <p class="text-white font-medium">幸福的瞬间</p>
                        </div>
                    </div>
                    
                    <div class="relative group overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-all duration-300">
                        <!-- 懒加载图片 -->
                        <img data-src="assets/photo3.jpg" alt="我们的回忆" 
                             src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' fill='%23f0f0f0'%3E%3Crect width='400' height='300' fill='%23f5f5f5'/%3E%3Cpath d='M320 160c0 35.3-28.7 64-64 64s-64-28.7-64-64 28.7-64 64-64 64 28.7 64 64zM32 160c0 35.3-28.7 64-64 64S-96 195.3-96 160 12.7 96 48 96s64 28.7 64 64zm128-80c0 17.7-14.3 32-32 32s-32-14.3-32-32 14.3-32 32-32 32 14.3 32 32zM288 80c0 17.7-14.3 32-32 32s-32-14.3-32-32 14.3-32 32-32 32 14.3 32 32z' fill='%23d0d0d0'/%3E%3C/svg%3E" 
                             class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110 lazy-load">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
                            <p class="text-white font-medium">爱的旅程</p>
                        </div>
                    </div>
                </div>
                
                <!-- 视频回忆部分 -->
                <div class="mt-16">
                    <h3 class="text-2xl font-romantic text-center text-love mb-8">视频回忆</h3>
                    <div class="bg-white rounded-2xl shadow-lg overflow-hidden max-w-4xl mx-auto">
                        <!-- 延迟加载视频，点击播放时才加载 -->
                        <div class="relative w-full max-h-[500px] bg-black rounded-lg overflow-hidden">
                            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23888'%3E%3Cpath d='M30 30h40v40H30z fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M40 40h20v20H40z' fill='%23aaa'/%3E%3Cpath d='M55 45l-10 5 10 5z fill='%23fff'/%3E%3C/svg%3E" class="w-full h-full object-cover cursor-pointer video-thumbnail"
                                 data-video-src="assets/video1.mp4">
                        </div>
                        <div class="p-4 text-center">
                            <p class="font-medium text-gray-700">与纯纯的美好时光</p>
                        </div>
                    </div>
                </div>
                
                <!-- 表情包部分 -->
                <div class="mt-16">
                    <h3 class="text-2xl font-romantic text-center text-love mb-8">我们的表情包</h3>
                    <div class="flex flex-wrap justify-center gap-4">
                        <div class="bg-white rounded-xl p-3 shadow-sm hover:shadow-md transition-all duration-300">
                            <!-- 懒加载图片 -->
                            <img data-src="assets/emoji1.jpg" alt="表情包" 
                                 src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23f0f0f0'%3E%3Crect width='100' height='100' fill='%23f5f5f5'/%3E%3Ccircle cx='50' cy='50' r='40' fill='%23d0d0d0'/%3E%3C/svg%3E" 
                                 class="w-24 h-24 object-cover rounded-lg lazy-load">
                        </div>
                        <div class="bg-white rounded-xl p-3 shadow-sm hover:shadow-md transition-all duration-300">
                            <!-- 懒加载图片 -->
                            <img data-src="assets/emoji2.jpg" alt="表情包" 
                                 src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23f0f0f0'%3E%3Crect width='100' height='100' fill='%23f5f5f5'/%3E%3Ccircle cx='50' cy='50' r='40' fill='%23d0d0d0'/%3E%3C/svg%3E" 
                                 class="w-24 h-24 object-cover rounded-lg lazy-load">
                        </div>
                        <div class="bg-white rounded-xl p-3 shadow-sm hover:shadow-md transition-all duration-300">
                            <!-- 懒加载图片 -->
                            <img data-src="assets/emoji3.jpg" alt="表情包" 
                                 src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23f0f0f0'%3E%3Crect width='100' height='100' fill='%23f5f5f5'/%3E%3Ccircle cx='50' cy='50' r='40' fill='%23d0d0d0'/%3E%3C/svg%3E" 
                                 class="w-24 h-24 object-cover rounded-lg lazy-load">
                        </div>
                        <div class="bg-white rounded-xl p-3 shadow-sm hover:shadow-md transition-all duration-300">
                            <!-- 懒加载图片 -->
                            <img data-src="assets/emoji4.jpg" alt="表情包" 
                                 src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23f0f0f0'%3E%3Crect width='100' height='100' fill='%23f5f5f5'/%3E%3Ccircle cx='50' cy='50' r='40' fill='%23d0d0d0'/%3E%3C/svg%3E" 
                                 class="w-24 h-24 object-cover rounded-lg lazy-load">
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 浪漫视频部分 -->
        <section class="py-20 px-4 bg-gradient-to-r from-love/5 to-romantic/5">
            <div class="max-w-4xl mx-auto">
                <h2 class="text-4xl font-romantic text-center text-love mb-10">爱的瞬间</h2>
                
                <div class="flex justify-center bg-white/90 backdrop-blur-md rounded-2xl shadow-lg p-6">
                    <div class="w-full max-w-[720px] md:max-w-[540px]">
                        <!-- 延迟加载视频，点击播放时才加载 -->
                        <div class="relative w-full aspect-[9/16] bg-black rounded-xl overflow-hidden">
                            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23888'%3E%3Cpath d='M30 30h40v40H30z fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M40 40h20v20H40z' fill='%23aaa'/%3E%3Cpath d='M55 45l-10 5 10 5z fill='%23fff'/%3E%3C/svg%3E" class="w-full h-full object-cover cursor-pointer video-thumbnail"
                                 data-video-src="assets/video2.mp4">
                        </div>
                        <div class="mt-4 text-center">
                            <p class="text-lg font-romantic text-gray-700">每一刻都值得珍藏</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 爱的告白部分 -->
        <section id="love-message" class="py-20 px-4 bg-gradient-to-b from-soft to-white/90">
            <div class="max-w-3xl mx-auto text-center">
                <h2 class="text-4xl font-romantic text-love mb-10">爱的告白</h2>
                
                <div class="bg-white/80 backdrop-blur-md rounded-2xl p-8 shadow-lg">
                    <p class="text-2xl md:text-3xl font-romantic text-gray-700 mb-6">
                        纯纯猪，爱你哟
                    </p>
                    
                    <p class="text-gray-600 mb-8">
                        亲爱的纯纯，<br><br>
                        从相遇的那一刻起，我的世界变得不一样了。你的笑容是我每天最期待的阳光，你的陪伴是我最珍贵的财富。<br><br>
                        今天是七夕，我想告诉你，我对你的爱就像银河一样浩瀚，像星星一样永恒。无论未来有多少风雨，我都会牵着你的手一起走过。<br><br>
                        纯纯猪，爱你哟！
                    </p>
                    
                    <div class="flex justify-center space-x-3">
                        <i class="fa fa-heart text-love text-3xl heart-beat"></i>
                        <i class="fa fa-heart text-loveLight text-2xl heart-beat" style="animation-delay: 0.2s"></i>
                        <i class="fa fa-heart text-love text-xl heart-beat" style="animation-delay: 0.4s"></i>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-love text-white py-6">
        <div class="container mx-auto text-center">
            <p class="text-lg font-romantic mb-2">永恒的爱，只为纯纯</p>
            <p class="text-white/70 text-sm">七夕快乐 · 爱你一万年</p>
        </div>
    </footer>

    <script>
        // 立即执行的简单版本，专门用于处理启动弹框显示问题
        // 这个版本不依赖DOMContentLoaded，确保在微信浏览器中也能工作
        (function() {
            // 快速显示启动弹框，最小化DOM操作
            var startModal = document.getElementById('start-modal');
            var startButton = document.getElementById('start-button');
            
            // 强制显示启动弹框并设置为最高层级
            if (startModal) {
                startModal.style.display = 'flex';
                startModal.style.zIndex = '9999';
                startModal.style.opacity = '0.9';
            }
            
            // 使用getElementById代替querySelectorAll以提高性能
            var header = document.querySelector('header');
            var main = document.querySelector('main');
            var footer = document.querySelector('footer');
            
            if (header) { header.style.opacity = '0'; header.style.pointerEvents = 'none'; }
            if (main) { main.style.opacity = '0'; main.style.pointerEvents = 'none'; }
            if (footer) { footer.style.opacity = '0'; footer.style.pointerEvents = 'none'; }
            
            // 简单的启动按钮点击事件
            if (startButton) {
                // 添加点击事件
                startButton.addEventListener('click', function() {
                    console.log('Start button clicked!');
                    
                    // 尝试播放音乐 - 简化版
                    var music = document.getElementById('background-music');
                    if (music) {
                        music.volume = 0.3;
                        try {
                            music.play().catch(function(e) { console.log('Audio play failed:', e); });
                        } catch(e) { console.log('Audio play error:', e); }
                    }
                    
                    // 隐藏弹框
                    if (startModal) {
                        startModal.style.transition = 'opacity 0.5s ease-out';
                        startModal.style.opacity = '0';
                        setTimeout(function() {
                            startModal.style.display = 'none';
                        }, 500);
                    }
                    
                    // 显示内容 - 直接设置样式
                    if (header) { 
                        header.style.opacity = '1'; 
                        header.style.pointerEvents = 'auto';
                    }
                    if (main) { 
                        main.style.opacity = '1'; 
                        main.style.pointerEvents = 'auto';
                    }
                    if (footer) { 
                        footer.style.opacity = '1'; 
                        footer.style.pointerEvents = 'auto';
                    }
                    
                    // 立即执行图片懒加载
                    lazyLoadImages();
                    
                    // 设置视频延迟加载
                    setupVideoThumbnails();
                });
            }
        })();
        
        // 图片懒加载实现
        function lazyLoadImages() {
            try {
                const lazyImages = document.querySelectorAll('img[data-src]');
                
                if (lazyImages.length > 0) {
                    if ('IntersectionObserver' in window) {
                        const imageObserver = new IntersectionObserver((entries, observer) => {
                            entries.forEach(entry => {
                                if (entry.isIntersecting) {
                                    const image = entry.target;
                                    image.src = image.dataset.src;
                                    image.classList.remove('lazy-load');
                                    imageObserver.unobserve(image);
                                }
                            });
                        }, { rootMargin: '200px 0px' });
                        
                        lazyImages.forEach(image => imageObserver.observe(image));
                    } else {
                        // 降级方案：立即加载所有图片
                        lazyImages.forEach(image => {
                            image.src = image.dataset.src;
                            image.classList.remove('lazy-load');
                        });
                    }
                    console.log('图片懒加载功能已初始化，共检测到', lazyImages.length, '张图片');
                }
            } catch (e) {
                console.error('图片懒加载功能异常:', e);
                // 降级方案：尝试直接加载所有图片
                try {
                    const allLazyImages = document.querySelectorAll('img[data-src]');
                    allLazyImages.forEach(img => {
                        img.src = img.dataset.src;
                    });
                } catch (err) {
                    console.error('降级方案也失败:', err);
                }
            }
        }
        
        // 视频延迟加载实现
        function setupVideoThumbnails() {
            try {
                const videoThumbnails = document.querySelectorAll('.video-thumbnail');
                
                if (videoThumbnails.length > 0) {
                    videoThumbnails.forEach(thumbnail => {
                        thumbnail.addEventListener('click', function() {
                            const videoSrc = this.getAttribute('data-video-src');
                            const parent = this.parentElement;
                            
                            // 创建视频元素
                            const video = document.createElement('video');
                            video.controls = true;
                            video.className = this.className.replace('video-thumbnail cursor-pointer', '');
                            video.style.width = '100%';
                            video.style.height = '100%';
                            
                            // 创建source元素
                            const source = document.createElement('source');
                            source.src = videoSrc;
                            source.type = 'video/mp4';
                            
                            // 添加source到video
                            video.appendChild(source);
                            
                            // 替换缩略图为视频
                            parent.innerHTML = '';
                            parent.appendChild(video);
                            
                            // 尝试自动播放
                            video.play().catch(e => console.log('自动播放失败:', e));
                        });
                    });
                    console.log('视频懒加载功能已初始化，共检测到', videoThumbnails.length, '个视频');
                }
            } catch (e) {
                console.error('视频懒加载功能异常:', e);
            }
        }
        
        // 音乐相关功能
        try {
            const music = document.getElementById('background-music');
            const musicControl = document.getElementById('music-control');
            const musicIcon = document.getElementById('music-icon');
            const musicPlayer = document.getElementById('music-player');
            const volumeControl = document.getElementById('volume-control');
            const volumeSlider = document.getElementById('volume-slider');
            
            let isPlaying = false;
            
            // 音乐播放/暂停控制
            if (musicControl && musicIcon && music) {
                musicControl.addEventListener('click', function() {
                    if (isPlaying) {
                        music.pause();
                        musicIcon.classList.remove('fa-pause');
                        musicIcon.classList.add('fa-music');
                    } else {
                        music.play().catch(error => {
                            console.log('播放背景音乐时出错:', error);
                        });
                        musicIcon.classList.remove('fa-music');
                        musicIcon.classList.add('fa-pause');
                    }
                    isPlaying = !isPlaying;
                });
            }
            
            // 音量控制
            if (volumeSlider && music) {
                volumeSlider.addEventListener('input', function() {
                    music.volume = this.value;
                });
            }
            
            // 鼠标悬停显示音量控制
            if (musicPlayer && volumeControl) {
                musicPlayer.addEventListener('mouseenter', function() {
                    volumeControl.classList.remove('hidden', 'opacity-0', 'translate-y-4');
                });
                
                musicPlayer.addEventListener('mouseleave', function() {
                    setTimeout(() => {
                        if (!volumeControl.matches(':hover')) {
                            volumeControl.classList.add('opacity-0', 'translate-y-4');
                            setTimeout(() => {
                                volumeControl.classList.add('hidden');
                            }, 300);
                        }
                    }, 300);
                });
                
                volumeControl.addEventListener('mouseleave', function() {
                    volumeControl.classList.add('opacity-0', 'translate-y-4');
                    setTimeout(() => {
                        volumeControl.classList.add('hidden');
                    }, 300);
                });
            }
        } catch (e) {
            console.error('音乐控制功能异常:', e);
        }
        
        // 平滑滚动
        try {
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    
                    try {
                        const targetId = this.getAttribute('href');
                        const targetElement = document.querySelector(targetId);
                        if (targetElement) {
                            targetElement.scrollIntoView({
                                behavior: 'smooth'
                            });
                        }
                    } catch (e) {
                        console.error('平滑滚动失败:', e);
                    }
                });
            });
        } catch (e) {
            console.error('平滑滚动功能异常:', e);
        }
        
        // 滚动时导航栏效果
        try {
            window.addEventListener('scroll', function() {
                const header = document.querySelector('header');
                if (header) {
                    if (window.scrollY > 50) {
                        header.classList.add('py-2');
                        header.classList.remove('py-3');
                    } else {
                        header.classList.add('py-3');
                        header.classList.remove('py-2');
                    }
                }
            });
        } catch (e) {
            console.error('导航栏滚动效果异常:', e);
        }
        
        // 创建心形装饰
        function createHeartDecorations() {
            try {
                const container = document.querySelector('body');
                const heartCount = Math.floor(window.innerWidth / 100);
                
                for (let i = 0; i < heartCount; i++) {
                    const heart = document.createElement('div');
                    const size = Math.random() * 20 + 10;
                    const left = Math.random() * 100;
                    const top = Math.random() * 100;
                    const delay = Math.random() * 5;
                    const opacity = Math.random() * 0.15 + 0.05;
                    
                    heart.className = 'fixed text-love float pointer-events-none';
                    heart.style.left = left + 'vw';
                    heart.style.top = top + 'vh';
                    heart.style.fontSize = size + 'px';
                    heart.style.opacity = opacity;
                    heart.style.animationDelay = delay + 's';
                    heart.innerHTML = '<i class="fa fa-heart"></i>';
                    
                    container.appendChild(heart);
                }
            } catch (e) {
                console.log('创建装饰失败:', e);
            }
        }
        
        // 页面加载完成后尝试创建心形装饰
        document.addEventListener('DOMContentLoaded', function() {
            try {
                setTimeout(createHeartDecorations, 2000);
            } catch (e) {
                console.error('创建心形装饰异常:', e);
            }
        });
    </script>
</body>
</html>